<template>
  <div class="edit_wrap">
    <div>
      <!-- 工具栏 -->
          <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <!-- 富文本输入内容 -->
            <Editor
          style="height: 300px; overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
    </div>
    <el-button type="success" @click="toSave">整体保存</el-button>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'JsxyCourseEdit',

  data() {
    return {
       editor: null,
        html: '', //v-model去绑定富文本的
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default' // or 'simple'
    };
  },
  components:{Toolbar,Editor},
  created(){
    // 富文本编辑器回显
    this.$bus.$on("sendMyDes",(val)=>{
        this.html=val;
    })
  },
  mounted() {
    
  },

  methods: {
    toSave(){
      // 点击整体保存 给兄弟组件传递 富文本编辑器的输入内容
      // 并让兄弟组件调用整体保存接口
      this.$bus.$emit("sendEditor",this.html)
      
    },
    onCreated (editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
};
</script>
<style lang="less" scoped>
    .edit_wrap{
      height:400px;
      background:skyblue;
      margin-top:40px;
      >div{
        height:400px;
        background:skyblue;
        margin-bottom:30px;
      }
    }
  
</style>